<template>
  <div class="teacher">
    <!--盒子-->
    <div class="box" @click="intoTeacher">
      <span class="bg-pic teacher"></span>
      <span class="text">线下辅导</span>
    </div>
    <Input prefix="ios-paper-plane"
           v-model="navInfo.url"
           style="width: 500px;margin-left: 20px"
           placeholder="输入URL"/>

    <Button size="default" type="success" @click="updateTeacherUrl">保存</Button>
  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    data() {
      return {
        navInfo: {
          navInfoId: "",
          navId: "",
          navName: "",
          url: "",
          status: ""
        }
      }
    },
    methods: {      //跳转链接
      intoTeacher: function () {
        window.open(this.navInfo.url, '_blank');
      },
      //保存URL
      updateTeacherUrl: function () {
        let navInfoId = this.navInfo.navInfoId
        let data = {
          url: this.navInfo.url
        }
        this.axios.put(`/nav/navInfo/navInfo/${navInfoId}`, data)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "修改成功"
              })
              //重新请求
              this.init();
            }
          })
      },
      init: function () {
        this.axios.get(`nav/navInfo/navInfo`, {
          params: {
            navName: "线下辅导"
          }
        })
          .then((resp) => {
            if (resp.data.flag) {
              this.navInfo = resp.data.data;
            }
          })
      }
    },
    mounted() {
      this.init();
    }
  }
</script>

<style scoped>
  .teacher {

  }

  /*字体样式*/
  .teacher .box {
    border-radius: 4px;
    width: 200px;
    height: 70px;
    margin: 20px 0px 20px 20px;
    line-height: 70px;
    text-align: center;
    line-height: 70px;
    font-family: Arial;
    font-weight: initial;
    color: #000000;
    font-size: 20px;
    background-color: #F3F5F6;
  }

  .teacher .box .text {
    display: inline-block;
    font-size: 20px;
  }

  .teacher .box .bg-pic {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-size: 100% 100%;
    vertical-align: middle;
    margin-right: 8px;
  }

  .teacher .box .teacher {
    width: 40px;
    height: 40px;
    background-image: url(../../../assets/nav/teacher.png);
  }
</style>
